<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .slideshow {
            width: 600px;
            margin: 200px auto;
            position: relative;
        }

        .slideshow img {
            width: 100%;
            display: none;
        }

        .slideshow img.active {
            display: block;
        }

        .spot {
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
        }

        .spot span {
            display: inline-block;
            width: 15px;
            height: 15px;
            border-radius: 10px;
            background-color: #aaa;
            margin-left: 10px;
        }

        .spot span.on {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="slideshow">
        <img src="./imgs/lbt-1.webp" class="active">
        <img src="./imgs/lbt-2.webp">
        <img src="./imgs/lbt-3.webp">
        <img src="./imgs/lbt-4.webp">
        <div class="spot"><span class="on"></span><span></span><span></span><span></span></div>
    </div>
    <script>
        //需求1：轮播图自己动起来
        let imgs = document.querySelectorAll(".slideshow img")
        let spans = document.querySelectorAll(".spot span")
        let divs = document.querySelector(".slideshow")
        let index = 0
        let timeId = null
        //需求2：小圆点随着轮播图改变而改变
        function autoPlay() {
            timeId = setInterval(() => {
                imgs[index].classList.remove("active")
                spans[index].classList.remove("on")
                index++
                if (index == 4) {
                    index = 0
                }
                imgs[index].classList.add("active")
                spans[index].classList.add("on")
            }, 1000);
        }
        autoPlay()
        //移入时轮播图停下来
        function mouse() {
            divs.addEventListener("mouseenter", function () {
                clearInterval(timeId)
                timeId = null
            })
            divs.addEventListener("mouseleave", function () {
                autoPlay()
            })
        }
        mouse()

        // 需求3：移入小圆点，出现对应的图片
        function dot() {
            spans.forEach((i, j) => {
                i.addEventListener("mouseenter", function () {
                    imgs[index].classList.remove("active")
                    spans[index].classList.remove("on")
                    imgs[j].classList.add("active")
                    spans[j].classList.add("on")
                    index = j
                })
            });
        }
        dot()
    </script>
</body>

</html>